<template>
  <ModalCard
    action
    :loading="loading"
    @close="emits('close')"
    @submit="emits('submit')"
    :submit-text="submitText"
    :close-text="closeText"
    :submitVisible="submitVisible ?? true"
  >
    <div style="padding: 25rem 36rem 20rem">
      <div style="display: flex;justify-content: flex-start;align-items: center;">
        <div style="font-size: 20rem;">{{ props.title }}</div>
        <slot name="extra"></slot>
      </div>
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </ModalCard>
</template>
<script setup lang="ts">
import ModalCard from '@/components/ModalCard.vue'
const emits = defineEmits(['close', 'submit'])
const props = defineProps({
  submitText: String,
  closeText: String,
  submitVisible: { type: Boolean, default: true },
  title: { type: String, default: () => null },
  loading: { type: Boolean, default: () => false }
})
</script>
<style scoped lang="scss">
.content {
  background: #ebeceb;
  margin-top: 15rem;
  padding: 20rem;
}
</style>
